<template>
  <div class="dashboard-container">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="16" :lg="12">
        <div id="lineChart" :style="{height:'300px',width:'100%'}" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { nextTick } from 'vue';
  import * as echarts from 'echarts/core';
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
  } from 'echarts/components';
  import {
    BarChart
  } from 'echarts/charts';
  import {
    CanvasRenderer
  } from 'echarts/renderers';
  echarts.use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart,
    CanvasRenderer
  ]);
  import resize from '@/components/charts/mixins/resize';
  export default {
    mixins: [resize],
    name: 'Dashboard',
    mounted() {
      nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById('lineChart'));
        // 指定图表的配置项和数据
        var option;
        option = {
          title: {
            text: '世界人口总量',
            subtext: '数据来自网络',
            textStyle: {
               fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2011年', '2012年']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
          },
          series: [{
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          }, {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        option && this.chart.setOption(option);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
  }
</style>
